<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div class="joys-menu-aside_box" @mouseleave="mouseleaveEvent">
    <transition name="rowBounce" v-if="menu.length < 5">
      <div class="joys-menu-row" v-if="frameAsideBox">
        <div class="joys-menu-row-item" v-for="item in menu" :key="item.index">
          <div class="joys-menu-row-item-title">
            <i class="joys-icon-notice" :class="item.iconClass"/>
            <span>{{ item.menuItemName }}</span>
          </div>
          <div
            class="joys-menu-row-item-content"
            v-for="childrenItem in item.children"
            :key="childrenItem.index"
          >
            <p @click="onClickMenuItem(childrenItem.appletId)">
              {{ childrenItem.appletName }}
            </p>
          </div>
        </div>
      </div>
    </transition>

    <transition name="bounce" v-else>
      <div class="joys-menu-cell-box" v-if="frameAsideBox">
        <div class="joys-menu-cell">
          <div
            class="joys-menu-cell-item joys-menu-cell-item-active"
            v-for="item in menu"
            :key="item.index"
          >
            <i class="iconfont_img" :class="item.iconClass"/>
            <span>{{ item.menuItemName }}</span>
            <i class=" el-icon-arrow-right right_img"></i>
            <div class="joys-menu-cell-item-child">
              <p
                v-for="childrenItem in item.children"
                :key="childrenItem.index"
                @click="onClickMenuItem(childrenItem.appletId)"
              >
                {{ childrenItem.appletName }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex';
  // import MenuNode from './MenuNode';

  let arr = ['日', '一', '二', '三', '四', '五', '六'];
  export default {
    name: 'Aside',
    // components: { MenuNode },
    data() {
      return {
        date: {},
        dateShow: {},
        isCollapse: false,
        appletId: [],
        indx: '',
        dataList: '',
        arr: [],
        menuBelow: false,
        frameAsideBox: false,
      }
    },
    mounted() {
      // this.activeAppletId()
      this.startTimer()
      this.loadMenu()
    },
    created() {
      // this.activeAppletId()
    },
    beforeDestroy() {
      this.stopTimer()
    },
    computed: {
      ...mapState(['tenant', 'menu', 'applets', 'activeIndex']),
      activeAppletId() {
        if (this.applets && this.applets.length > 0 && this.activeIndex >= 0) {
          return this.applets[this.activeIndex].appletId
        }
        return null
      },
      logoFileUrl() {
        if (this.tenant && this.tenant.logoFileId) {
          return '/joys-rest/joys-file/file/download/' + this.tenant.logoFileId+ '?AUTH-TOKEN=' + localStorage.getItem('AUTH-TOKEN')
        }
        return null
      },
      thumbnailFileUrl() {
        if (this.tenant && this.tenant.thumbnailFileId) {
          return '/joys-rest/joys-file/file/download/' + this.tenant.thumbnailFileId+ '?AUTH-TOKEN=' + localStorage.getItem('AUTH-TOKEN')
        }
        return null
      }
    },
    methods: {
      asideBoxShow() {
        this.frameAsideBox = true
      },
      mouseleaveEvent() {
        this.frameAsideBox = false
      },
      ...mapActions(['loadMenu', 'openApplet']),
      onClickMenuItem(menuItemId) {
        this.openApplet({appletId: menuItemId})
      },
      switchAsideStatus(e) {
        e.preventDefault()
        this.isCollapse = !this.isCollapse
      },
      startTimer() {
        this.timer = setInterval(() => {
          let myDate = new Date()//修改数据date
          let year = myDate.getFullYear()
          let month = myDate.getMonth() + 1
          let day = myDate.getDate()
          let dayOfWeek = arr[myDate.getDay()]
          let hour = myDate.getHours()
          let minutes = myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes()
          let second = myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds()
          this.date = hour + ':' + minutes
          this.dateShow = '星期' + dayOfWeek + ', ' + year + '/' + month + '/' + day
        }, 0)
      },
      stopTimer() {
        if (this.timer) {
          clearInterval(this.timer)
        }
      }
    }
  }
</script>

<style lang="less">

  .rowBounce-enter-active {
    animation: row-bounce-in 0.8s;
  }

  .rowBounce-leave-active {
    animation: row-bounce-in 0.8s reverse;
  }

  .bounce-enter-active {
    animation: bounce-in 0.5s;
  }

  .bounce-leave-active {
    animation: bounce-in 0.5s reverse;
  }
  .joys-menu-cell-item-child{
        float: right;
    left: 210px!important;
  }
  .joys-menu-cell-box{
    margin-top: 48px!important;
  }

  @keyframes bounce-in {
    0% {
      transform: translateX(-214px);
    }
    100% {
      transform: translateX(0px);
    }
  }

  @keyframes row-bounce-in {
    0% {
      overflow: hidden;
      transform: translateY(-500px);
    }
    100% {
      overflow: hidden;
      transform: translateY(0px);
    }
  }
</style>
